<template>
  <div class="normal-container" id="normal-container">
    <el-form label-width="100px" :disabled="disabled">
      <xm-f-select
        v-model="d.form.treatmentType"
        label="就诊类型："
        :disabled="true"
        :options="diagnosisType"
        foots="模板"
      >
        <el-button class="foots" style="visibility: hidden">模板</el-button>
      </xm-f-select>
      <xm-f-picker
        disabledDateT="after"
        v-model="d.form.morbidityTime"
        label="发病日期："
        foots="模板"
      >
        <el-button class="foots" style="visibility: hidden">模板</el-button>
      </xm-f-picker>
      <xm-f-intput
        type="textarea"
        v-model="d.form.mainSuit"
        label="主诉："
        foots="模板"
      >
        <el-button class="foots" @click="dialogClick('主诉')">模板</el-button>
      </xm-f-intput>
      <xm-f-intput
        type="textarea"
        v-model="d.form.historyPresent"
        label="现病史："
        foots="模板"
      >
        <el-button class="foots" @click="dialogClick('现病史')">模板</el-button>
      </xm-f-intput>
      <xm-f-intput
        type="textarea"
        v-model="d.form.past"
        label="既往史："
        foots="模板"
      >
        <el-button class="foots" @click="dialogClick('既往史')">模板</el-button>
      </xm-f-intput>
      <xm-f-intput
        type="textarea"
        v-model="d.form.allergy"
        label="过敏史："
        foots="模板"
      >
        <el-button class="foots" @click="dialogClick('过敏史')">模板</el-button>
      </xm-f-intput>
      <xm-f-intput
        type="textarea"
        v-model="d.form.personal"
        label="个人史："
        foots="模板"
      >
        <el-button class="foots" @click="dialogClick('个人史')">模板</el-button>
      </xm-f-intput>
      <xm-f-intput
        type="textarea"
        v-model="d.form.family"
        label="家族史："
        foots="模板"
      >
        <el-button class="foots" @click="dialogClick('家族史')">模板</el-button>
      </xm-f-intput>
      <xm-f-intput
        type="textarea"
        v-model="d.form.signs"
        label="体格检查："
        foots="模板"
      >
        <el-button class="foots" @click="dialogClick('体格检查')">
          模板
        </el-button>
      </xm-f-intput>
      <xm-f-intput
        type="textarea"
        v-model="d.form.auxiliaryExamination"
        label="辅助检查："
        foots="模板"
      >
        <el-button class="foots" @click="dialogClick('辅助检查')">
          模板
        </el-button>
      </xm-f-intput>
      <xm-f-diagnosis v-model="d.form.diagnosis" @seachData="seach">
        <el-button style="visibility: hidden" class="foots">模板</el-button>
      </xm-f-diagnosis>
      <xm-f-intput
        type="textarea"
        v-model="d.form.treatmentOpinion"
        label="治疗意见："
        foots="模板"
      >
        <el-button class="foots" @click="dialogClick('治疗意见')">
          模板
        </el-button>
      </xm-f-intput>
      <xm-f-picker
        v-model="d.form.followDate"
        label="复诊日期："
        disabledDateT="before"
      >
        <el-button style="visibility: hidden" class="foots">模板</el-button>
      </xm-f-picker>
      <el-form-item label="上传附件：">
        <file-upload
          :disabled="disabled"
          v-model="d.form.files"
          ref="fileUploadRef"
        ></file-upload>
      </el-form-item>
    </el-form>
    <div class="footer-div">
      <debounce-btn
        class="footer-button"
        type="primary"
        @debounce="toSave(2)"
        :disabled="disabled"
      >
        提交
      </debounce-btn>
      <debounce-btn
        class="footer-button"
        type="primary"
        @debounce="toSave(1)"
        :disabled="disabled"
      >
        保存
      </debounce-btn>
      <el-button class="footer-button" @click="showQrCode">二维码</el-button>
      <el-button class="footer-button" @click="toTemplateSave(3)">
        存为模板
      </el-button>
      <!-- <el-button class="footer-button" disabled>打印病历表</el-button> -->
    </div>
    <emr-template-dialog
      ref="dialogRef"
      @toData="templateData"
    ></emr-template-dialog>
  </div>
</template>
<script>
  import { reactive, ref, onBeforeMount } from 'vue'
  import DebounceBtn from '@/components/DebounceBtn'
  import {
    XmFSelect,
    XmFPicker,
    XmFIntput,
    XmFDiagnosis,
  } from '@/components/XMC/index'
  import FileUpload from '@/components/FileUpload'
  import emrTemplateDialog from './components/emrTemplateDialog.vue'
  import { useStore } from 'vuex'
  import emr from '@/hooks/emr' //{ diagnosisType, emrType, emrStatus,}
  // import { save } from '@/api/modules/emr'
  import { ElMessage } from 'element-plus'
  export default {
    components: {
      XmFSelect,
      XmFPicker,
      XmFIntput,
      XmFDiagnosis,
      FileUpload,
      DebounceBtn,
      emrTemplateDialog,
    },
    props: {
      pid: Number,
      vid: Number,
      emrId: [Number, String],
      disabled: Boolean,
    },
    setup(props, context) {
      const { diagnosisType, emrType, mrForm, normalWithKey } = emr()
      const d = reactive({
        form: mrForm(),
        emr: '默认病历',
      })

      const fileUploadRef = ref(null)
      const toSave = function (status) {
        const fileStatus = fileUploadRef.value.getStatus()
        if (fileStatus === false) {
          ElMessage.warning('还有文件在上传')
          return
        }
        const docType = emrType[d.emr]

        const data = {
          historicalVisitId: props.vid,
          docType,
          ...d.form,
          medicalRecordId: props.emrId,
          status,
          files: d.form.files,
          diagnosis: JSON.stringify(d.form.diagnosis),
        }
        context.emit('toData', data)
      }
      const toTemplateSave = function () {
        context.emit('toTemplateSave')
      }
      // const
      const seach = function (val) {
        console.log('val =' + val)
      }

      onBeforeMount(() => {
        console.log('normal-container')
        // toLoad(props.vid)
      })

      const clear = function () {
        d.form = mrForm()
      }

      const initEmr = function (data) {
        d.form = data
        if (d.form.diagnosis) {
          d.form.diagnosis = JSON.parse(d.form.diagnosis)
        }
      }
      const dialogRef = ref(null)
      const dialogClick = function (model) {
        dialogRef.value.initData(model)
      }

      const templateData = function (item) {
        if (item.model) {
          const key = normalWithKey.find((e) => e.label === item.model).value
          d.form[key] = item.data.value
        } else {
          normalWithKey.map((e) => {
            if (item.data[e.value]) {
              d.form[e.value] = item.data[e.value]
            }
          })
          console.log('model =', JSON.stringify(item.model))
          console.log('data =', JSON.stringify(item.data))
        }
      }
      const store = useStore()
      const showQrCode = function () {
        const items = []
        normalWithKey.forEach((e) => {
          const value = d.form[e.value]
          if (value) {
            items.push({ name: e.label, text: [value] })
          }
        })
        store.dispatch('qrcode/setQRCodeShowData', {
          config: { showTextbar: true },
          data: items,
        })
      }
      return {
        d,
        toSave,
        diagnosisType,
        seach,
        clear,
        fileUploadRef,
        initEmr,
        dialogClick,
        dialogRef,
        toTemplateSave,
        templateData,
        showQrCode,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .normal-container {
    .foots {
      margin: 0 24px;
    }
    .footer-div {
      .el-button {
        float: right;
        margin-right: 12px;
        margin-left: 0px;
      }
    }
  }
</style>
